<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common::common(title='基础数据')">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" ></meta>
</head>
<script type="text/javascript" th:src="@{/js/basic/userInfo.js?v=5}"></script>
<body>
<div id="app" v-cloak>
  <el-container>
		<el-header height="45px" class="inner_header">
	    	<el-form ref="form" :model="queryData" label-width="50px" label-position="left">
		    	<el-row :gutter="20">
				  <el-col :span="6">
				  		<el-form-item label="账号">
					  		<el-input  placeholder="请输入账号" v-model="queryData.name" size="mini" clearable>
							</el-input>
						</el-form-item>
				  </el-col>
				  <el-col :span="6">
				  		<el-form-item label="昵称">
					  		<el-input placeholder="请输入昵称" v-model="queryData.nickName" size="mini" clearable>
							</el-input>
						</el-form-item>
				  </el-col>
				  <el-col :span="6">
				  	<el-form-item>
				  		<el-button type="primary" icon="el-icon-search" @click="search" size="mini">查询</el-button>
				  		<el-button size="mini" icon="el-icon-plus" @click="addItem">增加</el-button>
				  	</el-form-item>
				  </el-col>
				</el-row>
	    	</el-form>
	    </el-header>
	    <el-main class="inner_main">
	    	
	    	  <el-table  
	    	    ref="userInfoDatagrid" 
	    	    :data="datagrid"
			    style="width: 100%;"
			    stripe>
			    	<el-table-column type="index" label="序号" width="50"></el-table-column>
				    <el-table-column prop="name" label="账号" :width="columnWidth"> </el-table-column>
				    <el-table-column prop="nickName" label="昵称" :width="columnWidth"> </el-table-column>
				    <el-table-column prop="email" label="邮箱" :width="columnWidth"> </el-table-column>
				    <el-table-column prop="phone" label="电话" :width="columnWidth"> </el-table-column>
				    <el-table-column prop="status" label="账户状态" :width="columnWidth">
				    	<template slot-scope="scope">
				   			<el-tag size="medium">{{ formatterStatus(scope.row) }}</el-tag>
				   		</template>
				    </el-table-column>
				    <el-table-column  label="操作"  width="150" align="center" halign="center">
				    	<template slot-scope="scope">
				    		<el-button type="primary" size="mini" @click="editItem(scope.row)">编辑</el-button>
							<el-button type="danger" size="mini" @click="deleteItem(scope.row)">删除</el-button>
					      </template>
				    </el-table-column>
			  </el-table>
		
			<div class="pagination_wrap">
			    <el-pagination
			      :current-page="queryData.page"
			      :page-sizes="[10, 20, 40, 100]"
			      :page-size="queryData.rows"
			      :layout="pagination_layout"
			      :total="totalNum"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange">
			    </el-pagination>
			 </div>
	    </el-main>
	</el-container>

	<el-dialog :visible.sync="dialogConfig.dialogFormVisible" :top="10" :close-on-click-modal="false" :show-close="false" fullscreen="true">
		  <el-form :model="addData" ref="dialogForm" :rules="rules" label-width="80px">
	      	<el-form-item label="账号" prop="name" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.name"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item v-if="!isEdit" label="密码" prop="password" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.password" type="password"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="昵称" prop="nickName" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.nickName"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="邮箱" prop="email" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.email"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="电话" prop="phone" 
	      		:label-width="dialogConfig.formLabelWidth">
		      <el-input v-model="addData.phone"  auto-complete="off" style="width:220px;"></el-input>
		    </el-form-item>
	      	<el-form-item label="账户状态" prop="status" 
	      		:label-width="dialogConfig.formLabelWidth">
		        <el-radio v-model="addData.status" label="1"  size="mini">启用</el-radio>
    			<el-radio v-model="addData.status" label="0" size="mini">禁用</el-radio>
		    </el-form-item>
		    <el-form-item label="资源" prop="status" 
	      		:label-width="dialogConfig.formLabelWidth">
		        
		        <el-tree
			      :data="trees"
			      ref="tree"
			      show-checkbox
			      check-strictly="true"
			      node-key="id"
			      style="width:600px;"
			      :default-expand-all="false"
			      :default-checked-keys="checkedTrees"
			      :expand-on-click-node="false">
			      <div class="custom-tree-node" slot-scope="{ node, data }" style="width:600px;">
				     <span style="width:200px;">{{ data.text }}</span>
				     <span style="width:350px;float:right;">{{ data.obj }}</span>
			      </div>
			    </el-tree>
			    
		    </el-form-item>
		    
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="closeDialog">取 消</el-button>
		    <el-button type="primary" @click="submitForm('dialogForm')">确 定</el-button>
		  </div>
	 </el-dialog>
   	 <el-dialog :visible.sync="dialogConfig.fileDialogVisible" center="true" 
 		  v-loading="fileLoading"
		  element-loading-text="正在上传"
		  element-loading-spinner="el-icon-loading"
    	  element-loading-background="rgba(0, 0, 0, 0.8)">
		<el-upload ref="fileUploader"
		  action="importNew"
		  name="file"
		  :show-file-list="false"
		  :limit="1"
		  :on-success="uploadFileSuccess"
		  :on-error="uploadFileError"
		  accept=".xls,.xlsx"
		  :before-upload="beforeUpload"
		  
		  >
		  <el-button size="small" slot="trigger" type="primary">请选择文件</el-button>
		  <div slot="tip" class="el-upload__tip">只能上传.xls,.xlsx文件，且不超过500KB</div>
		</el-upload>
	</el-dialog>

</div>
</body>
</html>